<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据管理 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="user-management.html"><i class="fas fa-user-cog"></i>用户管理</a></li>
                <li><a href="alert-settings.html"><i class="fas fa-bell"></i>预警设置</a></li>
                <li><a href="data-management.html" class="active"><i class="fas fa-database"></i>数据管理</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">数据管理</div>
                    <div class="subtitle">管理系统数据源、数据采集和数据备份</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">管理员</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="login.html" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 数据源管理卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-server"></i>
                        数据源管理
                    </div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        添加数据源
                    </button>
                </div>
                <div class="card-content">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>数据源名称</th>
                                    <th>数据类型</th>
                                    <th>连接方式</th>
                                    <th>服务器地址</th>
                                    <th>状态</th>
                                    <th>最后同步</th>
                                    <th style="width: 150px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>主控DCS系统</td>
                                    <td>实时工艺数据</td>
                                    <td>OPC UA</td>
                                    <td>172.16.10.5:4840</td>
                                    <td><span class="status-badge active">在线</span></td>
                                    <td>2023-11-28 08:45</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="测试连接">
                                                <i class="fas fa-plug"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>MES系统</td>
                                    <td>工单数据</td>
                                    <td>REST API</td>
                                    <td>172.16.10.12:8080</td>
                                    <td><span class="status-badge active">在线</span></td>
                                    <td>2023-11-28 08:40</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="测试连接">
                                                <i class="fas fa-plug"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>LIMS系统</td>
                                    <td>质检数据</td>
                                    <td>数据库</td>
                                    <td>172.16.10.20:1433</td>
                                    <td><span class="status-badge active">在线</span></td>
                                    <td>2023-11-28 08:30</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="测试连接">
                                                <i class="fas fa-plug"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>备用DCS系统</td>
                                    <td>备用工艺数据</td>
                                    <td>OPC UA</td>
                                    <td>172.16.10.6:4840</td>
                                    <td><span class="status-badge inactive">离线</span></td>
                                    <td>2023-11-27 15:20</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="测试连接">
                                                <i class="fas fa-plug"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 数据采集管理卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-exchange-alt"></i>
                        数据采集管理
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            添加采集任务
                        </button>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-trigger">
                                <i class="fas fa-filter"></i>
                                筛选
                            </button>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item">所有任务</a>
                                <a href="#" class="dropdown-item">已启用</a>
                                <a href="#" class="dropdown-item">已停用</a>
                                <a href="#" class="dropdown-item">错误任务</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>采集任务</th>
                                    <th>数据源</th>
                                    <th>采集内容</th>
                                    <th>采集频率</th>
                                    <th>状态</th>
                                    <th>最后执行</th>
                                    <th style="width: 150px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>炉次过程数据采集</td>
                                    <td>主控DCS系统</td>
                                    <td>温度、压力、流量等实时数据</td>
                                    <td>1秒/次</td>
                                    <td><span class="status-badge active">运行中</span></td>
                                    <td>2023-11-28 08:45:55</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="暂停">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="action-btn" title="查看日志">
                                                <i class="fas fa-file-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>工单数据同步</td>
                                    <td>MES系统</td>
                                    <td>工单、物料、计划等数据</td>
                                    <td>5分钟/次</td>
                                    <td><span class="status-badge active">运行中</span></td>
                                    <td>2023-11-28 08:40:12</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="暂停">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="action-btn" title="查看日志">
                                                <i class="fas fa-file-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>质检数据同步</td>
                                    <td>LIMS系统</td>
                                    <td>成分分析、质量检测数据</td>
                                    <td>10分钟/次</td>
                                    <td><span class="status-badge active">运行中</span></td>
                                    <td>2023-11-28 08:30:45</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="暂停">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="action-btn" title="查看日志">
                                                <i class="fas fa-file-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>备用数据采集</td>
                                    <td>备用DCS系统</td>
                                    <td>备用温度、压力、流量数据</td>
                                    <td>1秒/次</td>
                                    <td><span class="status-badge error">错误</span></td>
                                    <td>2023-11-27 15:20:10</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="重试">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                            <button class="action-btn" title="查看日志">
                                                <i class="fas fa-file-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 数据备份管理卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-hdd"></i>
                        数据备份管理
                    </div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        创建备份
                    </button>
                </div>
                <div class="card-content">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>备份名称</th>
                                    <th>备份内容</th>
                                    <th>备份时间</th>
                                    <th>备份大小</th>
                                    <th>备份方式</th>
                                    <th>状态</th>
                                    <th style="width: 150px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>每日全量备份-20231128</td>
                                    <td>全部数据</td>
                                    <td>2023-11-28 00:05</td>
                                    <td>85.4 GB</td>
                                    <td>自动</td>
                                    <td><span class="status-badge success">完成</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="下载">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="action-btn" title="恢复">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>每日全量备份-20231127</td>
                                    <td>全部数据</td>
                                    <td>2023-11-27 00:05</td>
                                    <td>83.2 GB</td>
                                    <td>自动</td>
                                    <td><span class="status-badge success">完成</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="下载">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="action-btn" title="恢复">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>每周完整备份-202347</td>
                                    <td>全部数据+配置</td>
                                    <td>2023-11-26 00:10</td>
                                    <td>95.7 GB</td>
                                    <td>自动</td>
                                    <td><span class="status-badge success">完成</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="下载">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="action-btn" title="恢复">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>系统升级前备份</td>
                                    <td>全部数据+配置+模型</td>
                                    <td>2023-11-25 14:30</td>
                                    <td>102.3 GB</td>
                                    <td>手动</td>
                                    <td><span class="status-badge success">完成</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="下载">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="action-btn" title="恢复">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="pagination">
                        <button class="btn btn-icon pagination-btn" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="btn pagination-btn active">1</button>
                        <button class="btn pagination-btn">2</button>
                        <button class="btn pagination-btn">3</button>
                        <button class="btn pagination-btn">...</button>
                        <button class="btn pagination-btn">10</button>
                        <button class="btn btn-icon pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化下拉菜单
            initDropdowns();
            
            // 初始化状态徽章颜色
            const statusBadges = document.querySelectorAll('.status-badge');
            statusBadges.forEach(badge => {
                if (badge.classList.contains('active')) {
                    badge.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
                    badge.style.color = '#4caf50';
                } else if (badge.classList.contains('inactive')) {
                    badge.style.backgroundColor = 'rgba(158, 158, 158, 0.1)';
                    badge.style.color = '#9e9e9e';
                } else if (badge.classList.contains('error')) {
                    badge.style.backgroundColor = 'rgba(244, 67, 54, 0.1)';
                    badge.style.color = '#f44336';
                } else if (badge.classList.contains('success')) {
                    badge.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
                    badge.style.color = '#4caf50';
                }
            });
            
            // 为操作按钮添加悬停效果
            const actionBtns = document.querySelectorAll('.action-btn');
            actionBtns.forEach(btn => {
                if (!btn.disabled) {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
                    });
                    
                    btn.addEventListener('mouseleave', () => {
                        btn.style.backgroundColor = '';
                    });
                }
            });
        });
        
        // 初始化下拉菜单
        function initDropdowns() {
            const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
            
            dropdownTriggers.forEach(trigger => {
                trigger.addEventListener('click', (e) => {
                    e.stopPropagation();
                    
                    const dropdown = trigger.closest('.dropdown');
                    const menu = dropdown.querySelector('.dropdown-menu');
                    
                    // 关闭其他下拉菜单
                    document.querySelectorAll('.dropdown-menu').forEach(item => {
                        if (item !== menu) {
                            item.classList.remove('show');
                        }
                    });
                    
                    // 切换当前下拉菜单
                    menu.classList.toggle('show');
                });
            });
            
            // 点击页面其他位置关闭下拉菜单
            document.addEventListener('click', () => {
                document.querySelectorAll('.dropdown-menu').forEach(menu => {
                    menu.classList.remove('show');
                });
            });
        }
    </script>
</body>
</html> 